<!-- eslint-disable vue/no-v-html -->
<template>
  <v-container>
    <v-card class="pa-1 elevation-2">
      <div
        class="html-content"
        v-html="htmlContent"
      />
    </v-card>
  </v-container>
</template>

<script setup>// 引入 Vue Router 的 useRoute 用于解析 URL 参数
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { marked } from 'marked';
const htmlContent = ref('');
const route = useRoute(); // 获取路由实例


// 异步加载 Markdown 文件并转换为 HTML
const loadMarkdownFile = async () => {
  try {
    const title = route.query.title || 'xiangmugaishu'; // 默认为 `xiangmugaishu`
    const response = await fetch(`/src/articles/关于博客/设计文档/${title}.md`);
    const markdown = await response.text();
    htmlContent.value = marked(markdown);
  } catch (error) {
    console.error('Error loading markdown file:', error);
  }
};
// 组件挂载后加载文件
onMounted(() => {
  loadMarkdownFile();
});

</script>

<style>
/* Vuetify 默认提供的间距和排版很优秀，但你可以自定义补充样式 */

/* VARIABLES */
:root {
  --theme-0: #282C34;
  --theme-primary: #4592e4;

  --theme-muted: #22252B;
  --theme-border: #334155;
  --theme-muted-blue: #4f565f;

  --theme-link: #4592e4;
  --theme-font-general: #ABB2BF;
  --select-text-bg-color: #4f565f;

  /* Slate grayscale */
  --theme-50: #0f172a; 
  --theme-100: #1e293b;
  --theme-200: #334155;
  --theme-300: #475569;
  --theme-400: #64748b;
  --theme-500: #94a3b8;
  --theme-600: #cbd5e1;
  --theme-700: #e2e8f0;
  --theme-800: #f1f5f9;
  --theme-900: #f8fafc;

  /* Tailwind variables */
  --tw-primary: #4592e4;

  --tw-prose-body: var(--theme-font-general);
  --tw-prose-headings: var(--theme-600);
  --tw-prose-lead: var(--theme-600);
  --tw-prose-links: var(--theme-link);
  --tw-prose-bold: var(--theme-600);
  --tw-prose-counters: var(--theme-500);
  --tw-prose-bullets: var(--theme-500);
  --tw-prose-hr: var(--theme-200);
  --tw-prose-quotes: var(--theme-900);
  --tw-prose-quote-borders: var(--theme-200);
  --tw-prose-captions: var(--theme-500);
  --tw-prose-code: var(--theme-900);
  --tw-prose-pre-code: var(--theme-100);
  --tw-prose-pre-bg: var(--theme-800);
  --tw-prose-th-borders: var(--theme-300);
  --tw-prose-td-borders: var(--theme-200);
  --tw-prose-bg: var(--theme-0);
  --tw-prose-meta: var(--theme-500);
  --tw-prose-meta-bg: var(--theme-muted);

  --tw-prose-invert-body: var(--theme-300);
  --tw-prose-invert-headings: var(--theme-0);
  --tw-prose-invert-lead: var(--theme-400);
  --tw-prose-invert-links: var(--theme-0);
  --tw-prose-invert-bold: var(--theme-0);
  --tw-prose-invert-counters: var(--theme-400);
  --tw-prose-invert-bullets: var(--theme-600);
  --tw-prose-invert-hr: var(--theme-700);
  --tw-prose-invert-quotes: var(--theme-100);
  --tw-prose-invert-quote-borders: var(--theme-700);
  --tw-prose-invert-captions: var(--theme-400);
  --tw-prose-invert-code: var(--theme-0);
  --tw-prose-invert-pre-bg: var(--theme-900);
  --tw-prose-invert-th-borders: var(--theme-600);
  --tw-prose-invert-td-borders: var(--theme-700);
  --tw-prose-invert-bg: var(--theme-800);
  --tw-prose-invert-meta: var(--theme-400);
  --tw-prose-invert-meta-bg: var(--theme-700);

  --tw-highlight-color: #fde047;
  /* yellow-300 */
  --tw-drop-shadow-md: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
  --tw-button-hover-bg: var(--theme-100);

  --tw-button-hover-bg-inverted: var(--theme-700);

  /* Typora variables */

  --background: var(--tw-prose-bg);
  --bg-color: var(--tw-prose-bg);
  --text-color: var(--tw-prose-body);
  --primary-color: var(--theme-primary);
  --md-char-color: var(--theme-400);
  --meta-content-color: var(--theme-500);
  --typora-source-body: var(--theme-800);
  --heading-char-color: var(--md-char-color);
  --mermaid-theme: neutral;
  --active-toggle-btn-color: var(--theme-200);

  --md-char-color-inverted: var(--theme-500);
  --meta-content-color-inverted: var(--theme-400);
  --typora-source-body-inverted: var(--theme-300);
  --mermaid-theme-inverted: dark;
  --active-toggle-btn-color-inverted: var(--theme-400);

  /* hbar */
  /* --side-bar-bg-color: var(--tw-prose-bg); */
  --side-bar-bg-color: var(--theme-muted);
  --active-file-bg-color: var(--theme-100);
  --active-file-text-color: var(--tw-prose-bold);
  --active-file-border-color: var(--theme-100);
  --panel-border-color: var(--theme-300);
  --blur-text-color: var(--theme-300);
  --window-border: 1px solid var(--theme-border);
  --item-hover-bg-color: var(--theme-100);
  --search-hit-text-bg-color: var(--theme-200);
  --search-hit-text-font-color: inherit;
  --search-select-text-color: var(--select-text-font-color);
  --search-select-bg-color: var(--select-text-bg-color);

  --blur-text-color-inverted: var(--theme-500);
  --panel-border-color-inverted: var(--theme-700);
  --active-file-bg-color-inverted: var(--theme-700);
  --window-border-inverted: 1px solid var(--theme-700);
  --search-hit-text-bg-color-inverted: var(--theme-700);
  --search-hit-text-font-color-inverted: var(--theme-0);
  --search-select-bg-color-inverted: var(--theme-400);
  --rawblock-edit-panel-bd: var(--tw-prose-pre-bg);
  --item-hover-bg-color-inverted: var(--theme-700);

  --ui-font-monospace: "IBMPlexMono", "FiraCode", "FiraMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ui-font-display: "IBMPlexSans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Custom */
  --footnote: var(--tw-prose-body);
  /* I'd love to use the --theme grayscale for --footnote-bg, but there's (currently)
  no way to add an alpha-channel to a CSS variable (and we need the transparency
  because otherwise the caret wil not be visible), so I here just used a hardcoded
  copy of --theme-500 */
  --footnote-bg: #94a3b855;
  --button-bg: var(--theme-200);

  --button-bg-inverted: var(--theme-600);

  --md-grid-header: var(--theme-100);
  --md-grid-header-ext: var(--theme-400);
  --md-grid-ext: var(--theme-300);
  --md-grid-header-active: var(--theme-500);
  --md-grid-active: var(--theme-400);
  --md-grid-border-color: var(--theme-500);

  --md-grid-header-inverted: var(--theme-600);
  --md-grid-header-ext-inverted: var(--theme-500);
  --md-grid-ext-inverted: var(--theme-600);
  --md-grid-header-active-inverted: var(--theme-400);
  --md-grid-active-inverted: var(--theme-500);
  --md-grid-border-color-inverted: var(--theme-200);

  --code-blocks-font-size: 0.86em;
  --inline-code-font-size: 0.86em;

  --inline-code-font-color: #b099fc;
}

.ty-file-search-match-text {
  background-color: var(--search-hit-text-bg-color);
}

/* TAILWIND RESET */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

::before,
::after {
  --tw-content: "";
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
*/

#text {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
  tab-size: 4;
  /* 3 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

#text {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--ui-font-monospace);
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/* TAILWIND PROSE IMPLEMENTATION */

#write {
  font-size: 1.12rem;
  line-height: 1.5;
}

html,
body {
  font-family: var(--ui-font-display);
}

/* on Windows/Linux, it is the part that is not titlebar or status bar. */
content,
titlebar {
  background: var(--tw-prose-bg);
}

#write {
  padding-top: 60px;
  padding-bottom: 60px;
  color: var(--tw-prose-body);
  /*Custom width*/
  max-width: 92ch;
  /*Default width*/
  /*max-width: 60ch;*/
}


#write> :where(:first-child) {
  margin-top: 0;
}

#write> :where(:last-child) {
  margin-bottom: 0;
}

/**
  * ---------------------
  * Block Elements
  */

/* yaml */
pre.md-meta-block {
  color: var(--tw-prose-meta);
  background-color: var(--tw-prose-meta-bg);
  font-weight: 400;
  font-size: var(--code-blocks-font-size);
  line-height: 1.7777778;
  border-radius: 0.5rem
    /* 8px */
  ;
  padding: 1.1111111em 1.3333333em;
  margin-bottom: 2.8em;
}

/* Heading indicator */
:root {
  --h1-ind-color: #E4374B;
  --h2-ind-color: #0EB54F;
  --h3-ind-color: #076DDD;
  --h4-ind-color: #876CE0;
  --h5-ind-color: #D2A852;
  --h6-ind-color: #E0E5D5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  padding-left: 10px;
}

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  content: '';
  position: absolute;
  left: 0;
  width: 3px;
  top: 2px;
  bottom: 2px;
  height: calc(100% - 4px);
}

h1:hover::before,
h1.md-focus::before {
  content: 'H1';
  border-color: var(--h1-ind-color);
}

h2:hover::before,
h2.md-focus::before {
  content: 'H2';
  border-color: var(--h2-ind-color);
}

h3:hover::before,
h3.md-focus::before {
  content: 'H3';
  border-color: var(--h3-ind-color);
}

h4:hover::before,
h4.md-focus::before {
  content: 'H4';
  border-color: var(--h4-ind-color);
}

h5:hover::before,
h5.md-focus::before {
  content: 'H5';
  border-color: var(--h5-ind-color);
}

h6:hover::before,
h6.md-focus::before {
  content: 'H6';
  border-color: var(--h6-ind-color);
}

h1:hover::before,
h2:hover::before,
h3:hover::before,
h4:hover::before,
h5:hover::before,
h6:hover::before,
h1.md-focus::before,
h2.md-focus::before,
h3.md-focus::before, 
h4.md-focus::before, 
h5.md-focus::before, 
h6.md-focus::before {
  border-width: 0;
  border-radius: 0;
  left: 0;
  background-color: var(--background);
  width: 26px;
  left: -23px;
  font-size: 10px;
  color: var(--theme-400);;
  margin: 0 auto;
  border-right-width: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  padding: 0;
  top: 2px;
  bottom: 2px;
}

/* headings */
h1 {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2em;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.2;
}

h1 strong {
  font-weight: 900;
}

h1::before {
  background-color: var(--h1-ind-color);
  /* Color of the bar */
}

h2 {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.7em;
  line-height: 1.3;
}

h2 strong {
  font-weight: 800;
}

h2::before {
  background-color: var(--h2-ind-color);
  /* Color of the bar */
}

h3 {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.4;
}

h3 strong {
  font-weight: 700;
}

h3::before {
  background-color: var(--h3-ind-color);
  /* Color of the bar */
}

h4 {
  color: var(--tw-prose-headings);
  font-weight: 600;
  line-height: 1.7;
}

h4 strong {
  font-weight: 700;
}

h4::before {
  background-color: var(--h4-ind-color);
  /* Color of the bar */
}

h5 {
  color: var(--tw-prose-headings);
  font-weight: 500;
  line-height: 1.8;
  font-size: 0.9em;
}

h5 strong {
  font-weight: 500;
}

h5::before {
  background-color: var(--h5-ind-color);
  /* Color of the bar */
}

h6 {
  color: var(--tw-prose-headings);
  font-weight: 400;
  line-height: 1.9;
  font-size: 0.9em;
}

h5 strong {
  font-weight: 400;
}

h6::before {
  background-color: var(--h6-ind-color);
  /* Color of the bar */
}

h2 code {
  font-size: 0.8611111em;
}

h3 code {
  font-size: 0.9em;
}

h2+* {
  margin-top: 0;
}

h3+* {
  margin-top: 0;
}

h4+* {
  margin-top: 0;
}

/* table */

table {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.9em;
  line-height: 1.5;

  border-spacing: 0;
  border-collapse: separate; /* Use separate border model */
  border-radius: 0.5em; /* Add border radius to the entire table */
  overflow: hidden; /* Ensure the border radius is applied to the whole table */
}

/* table header */

thead {
  border-bottom-color: var(--theme-muted-blue);
  background-color: var(--theme-muted);
}

table th,
table td {
  border: 1px solid var(--theme-300);
  padding: .6em;
  border-radius: 0; /* Remove border-radius from individual cells */
}

table th:first-child {
  border-top-left-radius: 0.5em; /* Add rounded corners only to table */
}

table th:last-child {
  border-top-right-radius: 0.5em; /* Add rounded corners only to table */
}

table tr:last-child td:first-child {
  border-bottom-left-radius: 0.5em; /* Add rounded corners only to table */
}

table tr:last-child td:last-child {
  border-bottom-right-radius: 0.5em; /* Add rounded corners only to table */
}

/* Remove duplicate borders */
table th,
table td {
  border-top-width: 0; /* Remove top border */
  border-left-width: 0; /* Remove left border */
}

table th {
  border-top-width: 1px; /* Restore top border for header cells */
}

table td:first-child {
  border-left-width: 1px; /* Restore left border for the first column cells */
}

table th:first-child {
  border-left-width: 1px; /* Restore left border for the first header cell */
}

table tr:first-child th {
  border-top-width: 1px; /* Restore top border for the first header row */
}

table tr:first-child td {
  border-top-width: 1px; /* Restore top border for the first data row */
}

table tr td:last-child {
  border-right-width: 1px; /* Ensure right border for the last column cells */
}

table tr:last-child td {
  border-bottom-width: 1px; /* Ensure bottom border for the last row cells */
}

/* table end */

.md-grid-board tr[row="1"] {
  background-color: var(--md-grid-header);
}

.md-grid-board a:hover,
.md-grid-board a.md-active {
  background: var(--md-grid-active);
}

.md-grid-board tr[row="1"] a:hover,
.md-grid-board tr[row="1"] a.md-active {
  background: var(--md-grid-header-active);
}

.md-grid-board .md-grid-ext {
  background: var(--md-grid-ext);
}

.md-grid-board tr[row="1"] .md-grid-ext {
  background: var(--md-grid-header-ext);
}

.md-grid-board a {
  border-color: var(--md-grid-border-color) !important;
}

/* lists */

ol {
  list-style-type: decimal;
  padding-left: 1.6em;
  margin-top: 1em;
  margin-bottom: 1em;
}

li {
  margin-top: 0;
  margin-bottom: 0;
}

ul {
  list-style-type: disc;
  padding-left: 1.6em;
  margin-top: 1em;
  margin-bottom: 1em;
}

#write ul.task-list {
  padding-left: 0;
}

#write li.task-list-item {
  padding-left: 0.4em;
}

#write input[type="checkbox"] {
  margin-left: -1em;
}

input[checked]~* {
  opacity: 0.7;
  text-decoration: line-through;
}

ol>li::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}

ul>li::marker {
  color: var(--tw-prose-bullets);
}

ul>li,
ol>li {
  padding-left: 0.4em;
}

ul>li p,
ol>li p {
  margin-top: 0;
  margin-bottom: 0;
}

#write>ul>li> :not(input):first-child,
#write>ol>li> :not(input):first-child,
#write>ul>li>input+*,
#write>ol>li>input+* {
  margin-top: 0;
}

#write>ul>li>*:last-child,
#write>ol>li>*:last-child {
  margin-bottom: 0;
}

#write ul>li>p:only-child,
#write ol>li>p:only-child,
#write ul>li>input+p:last-child,
#write ol>li>input+p:last-child {
  margin-top: 0;
  margin-bottom: 0;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-top: 0;
  margin-bottom: 0;
}

.ol-list .ol-list,
.ol-list .ul-list,
.ul-list .ul-list,
.ul-list .ol-list {
  margin-top: 0;
  margin-bottom: 0;
}

/* blockquote */
blockquote {
  font-weight: 400;
  font-style: normal;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--theme-link);
  quotes: "\201C" "\201D" "\2018" "\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1.0666667em;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-right: 1em;
  border-radius: 0 .5em .5em 0;
  background-color: var(--theme-muted-blue);
}

blockquote h1::before,
blockquote h2::before,
blockquote h3::before,
blockquote h4::before,
blockquote h5::before,
blockquote h6::before {
  content: none;
  /* Removes the content, effectively hiding the bar */
  padding-left: 0 !important;
}

/* hr */
hr {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
}

[mdtype="hr"] {
  margin-top: 1.4em;
  margin-bottom: 1.4em;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* diagram panel */
.md-diagram-panel {
  color: var(--tw-prose-body);
}

.enable-diagrams .md-diagram .code-tooltip {
  bottom: -1.9em;
  right: 0;
}

.md-fences-adv-panel {
  margin-top: 1.3em;
}

/* footnote definition */
sup.md-footnote {
  color: var(--footnote);
  background-color: var(--footnote-bg);
}

.footnotes {
  font-size: 0.85em;
}

.md-reverse-footnote-area a {
  font-family: "IBMPlexSans";
  text-decoration: none;
  color: var(--tw-primary);
  border-radius: 3px;
}

.md-hover-tip .code-tooltip-content {
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 0.8em 1.2em;
}

.md-reverse-footnote-area a:hover {
  background-color: var(--item-hover-bg-color);
}

.md-def-name:before {
  color: var(--md-char-color);
}

.md-rawblock.md-rawblock-on-edit,
.md-rawblock:hover {
  color: var(--tw-prose-pre-code);
}

.md-inline-math script {
  color: var(--tw-prose-code);
}

g[data-mml-node="merror"]>rect[data-background] {
  fill: var(--tw-highlight-color) !important;
}

g[data-mml-node="merror"]>g {
  fill: #000 !important;
  stroke: #000 !important;
}

.code-tooltip {
  color: var(--tw-prose-pre-code);
}

.code-tooltip .md-mathjax-preview {
  color: var(--tw-prose-body);
}

.md-htmlblock-container,
.md-rawblock-input.md-rawblock-control,
.md-htmlblock-panel.md-rawblock-control,
.md-math-container {
  border-radius: 0.5rem 0 0.5rem 0.5rem;
}

.md-rawblock-input {
  font-size: var(--code-blocks-font-size);
  padding: 0 1.3333333em;
}

.md-mathblock-panel .md-rawblock-input.md-rawblock-control {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 0;
}

.md-mathblock-panel .md-rawblock-before {
  padding-top: 1.1em;
  border-top-left-radius: 0.5rem;
}

.md-mathblock-panel .md-rawblock-after {
  padding-bottom: 1.1em;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.md-htmlblock-panel .md-rawblock-input {
  padding-top: 1.1111111em;
  padding-bottom: 1.1111111em;
}

.md-mathblock-panel .md-rawblock-before,
.md-mathblock-panel .md-rawblock-after {
  font-size: var(--code-blocks-font-size);
  padding-left: calc(4px + 1.3333333em);
  color: var(--code-bracket);
}

.md-rawblock-tooltip {
  color: var(--tw-prose-pre-code);
  border-radius: 0.5rem 0.5rem 0 0;
}

.md-rawblock-tooltip-name {
  opacity: 1;
}

.md-comment {
  font-size: var(--inline-code-font-size);
  color: var(--code-comment);
}

.md-raw-inline,
.md-tag,
[md-inline="linebreak"],
.md-image>.md-meta,
.md-inline-math.md-expand>.md-inline-math-container {
  font-size: var(--code-blocks-font-size);
}

/**
  * Code Fences
  * see http://support.typora.io/Code-Block-Styles
  */

:root {
  --cf-bg-color: #23272E;
  --cf-font-color: var(--theme-font-general);
}

.md-fences {
  color: var(--cf-font-color);
  background-color: var(--cf-bg-color);
  font-weight: 400;
  font-size: var(--code-blocks-font-size);
  line-height: 1.5;
  margin-top: 1em;
  margin-bottom: 1em;
  border-radius: 0.5rem;
  padding: 1em 1em;
  -webkit-font-smoothing: initial;
  -moz-osx-font-smoothing: initial;
}

.md-fences.md-focus {
  border-bottom-right-radius: 0;
}

.md-fences>.code-tooltip {
  height: 1.8rem;
  top: 0.4rem;
  right: 0.4rem;
  font-size: 0.8rem;
  border-radius: 0.5rem;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-color: var(--theme-200);
  color: var(--theme-font-general);
}

.md-fences:hover>.code-tooltip {
  background-color: var(--theme-300);
}

.code-tooltip .ty-input {
  min-width: 10rem;
}

pre code {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

pre code::before {
  content: none;
}

pre code::after {
  content: none;
}

/* SYNTAX HIGHLIGHTING */

:root {
  --code-gutter: #495162;
}

#write .cm-s-inner {
  --code-neutral: rgb(126, 132, 142);
  --code-cursor: var(--theme-800);
  --code-string: #98C379;
  --code-number: rgb(209, 154, 102);
  --code-tag: #E06C75;
  --code-keyword: rgb(198, 120, 221);
  --code-variable: rgb(97, 175, 239);
  --code-comment: #7E848E;
  --code-operator: var(--code-comment);
  --code-bracket: var(--code-comment);
  --code-citation: var(--theme-500);
}

.CodeMirror-selectedtext {
  background-color: transparent;
}

.CodeMirror-cursor {
  border-left: 2px solid var(--code-cursor) !important;
}

.CodeMirror-gutters {
  border-color: var(--code-gutter);
}

.cm-s-inner span.cm-string {
  color: var(--code-string);
}

.cm-s-inner span.cm-number {
  color: var(--code-number);
}

.cm-s-inner span.cm-tag {
  color: var(--code-tag)
}

.cm-s-inner span.cm-keyword {
  color: var(--code-keyword);
}

.cm-s-inner span.cm-qualifier {
  color: white;
}

.cm-s-inner .CodeMirror-guttermarker,
.cm-s-inner .CodeMirror-guttermarker-subtle,
.cm-s-inner span.cm-comment.cm-def,
.cm-s-inner span.cm-comment.cm-type,
.cm-s-inner span.cm-builtin,
.cm-s-inner span.cm-type,
.cm-s-inner span.cm-header,
.cm-s-inner span.cm-link,
.cm-s-inner span.cm-error {
  background: transparent;
  color: var(--code-neutral);
}


.cm-s-inner span.cm-atom,
.cm-s-inner span.cm-def {
  color: var(--code-variable);
}

.cm-s-inner span.cm-attribute {
  color: #D19A66;
}

.cm-s-inner span.cm-property,
.cm-s-inner span.cm-property-2,
.cm-s-inner span.cm-variable,
.cm-s-inner span.cm-variable-2,
.cm-s-inner span.cm-variable-3 {
  color: rgb(97, 175, 239);
}

.cm-s-inner span.cm-type {
  color: #0EB54F;
}

.cm-s-inner span.cm-comment {
  color: var(--code-comment)
}

.cm-s-inner .CodeMirror-linenumber {
  color: var(--code-gutter);
}

.cm-s-inner span.cm-operator {
  color: var(--code-operator);
}

.cm-s-inner span.cm-bracket,
.cm-s-inner span.cm-tag.cm-bracket,
.cm-s-inner span.cm-meta {
  color: var(--code-bracket);
}

.cm-s-inner span.cm-link {
  text-decoration: underline;
}

/**
  * Inline Elements
  */

/* basic styles */

code {
  color: var(--inline-code-font-color);
  font-weight: normal;
  font-size: var(--inline-code-font-size);
  font-family: var(--ui-font-monospace);
  padding: .2rem .2rem;
  border-radius: 3px;
  background: var(--theme-muted) !important;
  display: inline;
  vertical-align: bottom;
  line-height: inherit;
  -webkit-font-smoothing: initial;
  -moz-osx-font-smoothing: initial;
}

[md-inline="code"].md-expand>code::before,
[md-inline="code"].md-expand>code::after {
  content: "";
}

a code {
  color: var(--tw-prose-links);
}

strong {
  color: var(--tw-prose-bold);
  font-weight: 600;
}

a {
  color: var(--tw-prose-links);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}

/* A block-level image should have a total top and bottom margin of 2em.
It is always wrapped in a paragraph with 1.2em vertical margin, hence we
add 0.8 here */
p>.md-image:only-child {
  margin-top: 0.8em !important;
  margin-bottom: 0.8em !important;
}

.md-image>.md-meta {
  color: var(--tw-prose-code);
}

.md-image>img {
  border-radius: 0.5em !important;
  border: none !important;
}

/* extend styles */

mark {
  border-radius: 3px;
  padding: 0 2px;
  background-color: var(--tw-highlight-color);
}

/**
  * Source Code Mode
  * see http://support.typora.io/Code-Block-Styles
  */

.cm-s-typora-default .CodeMirror-activeline-background {
  background-color: var(--item-hover-bg-color);
}

#typora-source {
  font-family: var(--ui-font-monospace);
  color: var(--typora-source-body);
}

#typora-source .cm-header {
  color: var(--code-tag);
}

#typora-source .cm-link {
  color: var(--code-string);
}

#typora-source .cm-string {
  color: var(--code-string);
}

#typora-source .cm-comment {
  color: var(--code-comment);
}

#typora-source .cm-atom {
  color: var(--code-citation);
}

#typora-source .cm-tag {
  color: var(--code-tag);
}

#typora-source .cm-attribute {
  color: var(--code-variable);
}

#typora-source .cm-bracket {
  color: var(--code-bracket);
}

.file-list-item-file-ext-part {
  opacity: 0.5;
}

#write div.md-toc-tooltip {
  background-color: var(--tw-prose-bg);
}

.md-toc {
  font-size: 0.94em;
}

.md-toc-h1 .md-toc-inner {
  margin-left: 0;
}

.md-toc-h2 .md-toc-inner {
  margin-left: 1em;
}

.md-toc-h3 .md-toc-inner {
  margin-left: 2em;
}

.md-toc-h4 .md-toc-inner {
  margin-left: 3em;
}

.md-toc-h5 .md-toc-inner {
  margin-left: 4em;
}

.md-toc-h6 .md-toc-inner {
  margin-left: 5em;
}

#typora-sidebar {
  border-right: var(--window-border);
}

.sidebar-tab {
  text-transform: none;
  font-weight: 700;
  font-size: 1.1em;
}

.md-search-hit {
  color: var(--search-hit-text-font-color);
  background-color: var(--search-hit-text-bg-color);
}

#md-searchpanel {
  box-shadow: none;
  filter: var(--tw-drop-shadow-md);
}

#md-searchpanel .btn:not(.close-btn):hover {
  box-shadow: none;
  -webkit-box-shadow: none;
  background-color: var(--tw-button-hover-bg);
}

#md-searchpanel input,
#md-searchpanel .btn,
#searchpanel-msg {
  border-radius: 5px;
}

#searchpanel-msg {
  color: var(--theme-500);
  border-color: var(--theme-300);
  background: var(--theme-100);
}

.form-control {
  border-color: var(--panel-border-color);
}

.btn-default {
  background-color: var(--button-bg);
}


/*sidebar file-list and search results*/

#file-library-list[data-state="complete"] #sidebar-loading-template {
  padding: 0rem;
}

#typora-sidebar .file-list-item,
.ty-search-item {
  border: none;
  padding: 1rem;
}

body.html-for-mac #typora-sidebar .file-list-item,
body.html-for-mac .ty-search-item {
  transition-duration: 0.3s !important;
  transition-property: background-color, border, color, height !important;
}

#typora-sidebar .file-list-item:hover,
.ty-search-item:hover {
  background: var(--borders);
}

#typora-sidebar .ty-search-item-line {
  font-family: var(--font-family);
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.3rem;
  border-radius: 0.3rem;
  margin-left: 24px;
}

body.o #typora-sidebar .ty-search-item-line {
  transition-duration: 0.2s;
}

#typora-sidebar .ty-search-item-line * {
  opacity: 1;
}

#typora-sidebar .ty-search-item .ty-search-item-line:hover,
#typora-sidebar .ty-search-item-line.active {
  background-color: var(--select-text-bg-color);
  color: white;
} /* makes easier identifying which searched item is active in the sidebar */

#typora-sidebar .file-list-item-file-name {
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 0rem;
  line-height: 1.8rem;
  float: right;
}

#typora-sidebar .file-list-item-file-ext-part {
  font-weight: 800;
  opacity: 0.5;
}

#typora-sidebar .file-list-item-parent-loc,
#typora-sidebar .file-list-item-time {
  font-family: var(--font-family);
  font-weight: 400;
  opacity: 0.5;
  display: block;
}

#typora-sidebar .file-list-item-summary {
  float: left;
  font-size: 0.8rem;
  opacity: 0.9;
}

#typora-sidebar .file-list-item-count {
  font-size: 0.75rem;
  background-color: var(--primary-color);
  color: white;
  border-radius: 0.2rem;
  min-width: 1.25rem;
  height: 1.25rem;
  text-align: center;
  line-height: 1.25rem;
  position: relative;
  top: 0.3rem;
}

#typora-sidebar input.file-list-item-file-name {
  margin: 0.5rem 0rem 0.5rem 0.7rem;
  padding: 0.4rem !important;
  line-height: 1rem;
  float: right;
  border-radius: 0.3rem;
  font-weight: 500;
  background-color: var(--background) !important;
}

#typora-sidebar .file-list-item.file-library-file-node {
  border: none;
}

#typora-sidebar .file-tree-node.active .file-node-background,
#typora-sidebar .file-list-item.active,
#typora-sidebar .ty-search-item.active {
  background-color: var(--background);
  outline: 1px solid var(--borders);
  border-right: none;
  border-top: none;
  border-bottom: none;
  border-left: 3px solid var(--primary-color);
  color: var(--primary-color) !important;
  font-weight: 500;
}

#typora-sidebar .file-tree-node.active .file-node-content {
  color: var(--primary-color) !important;
  font-weight: 500;
}

#typora-sidebar .file-tree-node {
  padding: 0rem;
  font-weight: 400;
  font-size: 1rem;
  margin-left: 0.8rem;
}

#typora-sidebar .file-tree-node .file-node-content {
  padding: 0rem;
  line-height: 2.2rem;
  height: 2.2rem;
  background: none;
  margin-bottom: 0px;
}

#typora-sidebar .file-tree-node .file-node-background {
  padding: 0rem;
  height: 2.2rem;
}

#typora-sidebar .file-tree-node .file-node-icon {
  margin-right: 0.5rem;
}

#typora-sidebar .file-tree-node .file-node-icon.fa-file-text-o {
  margin-top: 0.33rem;
}

#typora-sidebar .file-tree-node .file-node-icon.fa-folder {
  margin-top: 0.36rem;
}

#typora-sidebar .file-tree-node .fa-caret-down,
#typora-sidebar .file-tree-node .fa-caret-right {
  position: relative;
  top: 5px;
}

#typora-sidebar .file-tree-node .file-tree-rename-input {
  height: 2.2rem;
  background: none;
  border: none;
  font-weight: 400;
  margin: 0rem;
  padding-left: 0rem;
}

#typora-sidebar .ty-search-item-collapse-icon {
  top: 9px;
}

/*no left border*/
#typora-sidebar .file-tree-node.active > .file-node-background {
  border: none;
}

/*no dotted highlighting*/
.file-library-node:not(.file-node-root):focus > .file-node-content {
  outline: none;
}

#typora-sidebar #sidebar-files-menu {
  border: solid 1px var(--borders);
  border-radius: 0.3rem;
  box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
}

#typora-sidebar #ty-sidebar-footer {
  background-color: var(--bg-color);
  border-top: solid 1px var(--borders);
  font-weight: 500;
}

#typora-sidebar #ty-sidebar-footer li {
  transition-duration: 0.2s;
  transition-property: background-color, color;
}

#typora-sidebar
  #ty-sidebar-footer
  li:not(.file-sort-item):not(:first-child):not(.empty-menu-group):not(.folder-menu-group):hover {
  color: var(--primary-color);
  background-color: var(--boxes);
}

#typora-sidebar
  #ty-sidebar-footer
  .file-action-item.file-sort-item
  > span:first-of-type {
  line-height: 2rem;
}

/* Folder + File Icons */

/* Hide the original Font Awesome icon */
#typora-sidebar .file-tree-node .file-node-icon {
  font-size: 0; /* Hide the text/icon inside the <i> tag */
  width: 16px; /* Set a fixed width */
  height: 16px; /* Set a fixed height */
  background-size: contain; /* Ensure the SVG scales correctly */
  background-repeat: no-repeat; /* Prevent repeating */
  display: inline-block; /* Maintain the element's block nature */
}

#typora-sidebar .file-tree-node .file-node-icon.fa-folder {
  background-image: url('./ceylon/icons/cd-dualtone-folder-closed.svg');
  margin-top: 0.5rem;
}

/* Specific styling for the collapsed folder icon SVG */
#typora-sidebar .file-tree-node.file-node-collapsed > .file-node-content > .file-node-icon.fa-folder {
  background-image: url('./ceylon/icons/cd-dualtone-folder-closed.svg');
  margin-top: 0.5rem;
}

/* Specific styling for the expanded folder icon SVG */
#typora-sidebar .file-tree-node.file-node-expanded > .file-node-content > .file-node-icon.fa-folder {
  background-image: url('./ceylon/icons/cd-dualtone-folder-open.svg');
  margin-top: 0.5rem;
}

/* Specific styling for the file icon SVG */
#typora-sidebar .file-tree-node > .file-node-content > .file-node-icon.fa-file-text-o {
  background-image: url('./ceylon/icons/cd-dualtone-file.svg');
  margin-top: 0.5rem;
}

/* Specific styling for the active file icon SVG */
#typora-sidebar .file-tree-node.active > .file-node-content > .file-node-icon.fa-file-text-o {
  background-image: url('./ceylon/icons/cd-dualtone-file-selected.svg');
  margin-top: 0.5rem;
}
</style>